<template>
	<view v-if="hotelInfo">
		<!-- 主体 -->
		<view class="page hotel-detail">
			<!-- 大图 -->
			<view class="picture bg-cover" :style="{backgroundImage: 'url(' + (imgPath + hotelInfo.img) + ')'}">
				<view class="images flex-row-center" @click="goNext('/pages/hotel/picture?hotelId=' + hotelInfo.id)">
					<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/icon-image.png"></image>
					<text class="font11 font-ffffff">{{hotelInfo.images ? hotelInfo.images.length : 0}}张</text>
				</view>
				<image class="share" src="https://static.newbeaconhotels.com/app/hotel/icon-share.png" @tap="openShare"></image>
			</view>
			<!-- 评论 -->
			<view class="information">
				<view class="name font15">{{hotelInfo.name}}</view>
				<view class="flex-row-between">
					<view class="left flex-row-start" @click="goNext('/pages/hotel/commentList?hotelId=' + hotelInfo.id)">
						<text class="font16">{{hotelInfo.score}}</text>
						<text class="font14">分</text>
						<uni-rate class="rate" :value="hotelInfo.score" :is-fill="false" :disabled="true" margin="5" disabledColor="#ff6428" activeColor="#ff6428" color="#ff6428" size="12" />
						<view class="font14">{{hotelInfo.number}}条评论</view>
						<uni-icons class="icons font-b" type="arrowright" size="8" color="#000000"></uni-icons>
					</view>
					<view class="right flex-row-center" @tap="openTel">
						<image class="tel" src="https://static.newbeaconhotels.com/app/hotel/icon-tel.png"></image>
					</view>
				</view>
			</view>
			<!-- 地址 -->
			<view class="address flex-row-between">
				<view class="left">
					<view class="font14">{{hotelInfo.addrd}}</view>
				</view>
				<view class="right flex-row-end" @click="openLocation">
					<view class="font14 font-link">地图</view>
					<uni-icons class="icons font-b" type="arrowright" size="12" color="#cccccc"></uni-icons>
				</view>
			</view>
			<!-- 领券 -->
			<view v-if="coupons && coupons.length > 0" class="coupons flex-row-between">
				<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/iconcoupon.png"></image>
				<view class="box">
					<swiper class="swiper" :autoplay="true" :interval="3000" :vertical="true" :disable-touch="true" :circular="true">
						<swiper-item v-for="(item, index) in coupons" :key="index">
							<view class="swiper-item font13 ellipsis">{{item.name}}</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="btn tc font12 font-ffffff" @tap="openCoupon">领券</view>
			</view>
			<!-- 酒店详情 -->
			<view class="detail flex-row-between" @click="goNext('/pages/hotel/equipment?hotelId=' + hotelInfo.id)">
				<view class="font14">酒店详情</view>
				<view class="imgs flex-row-end">
					<image class="img" mode="heightFix" v-for="(item, index) in hotelInfo.fac" :key="index" v-if="index < 5" :src="imgPath + item.img"></image>
				</view>
				<uni-icons class="icons font-b" type="arrowright" size="12" color="#cccccc"></uni-icons>
			</view>
			<!-- 广告位 -->
			<view class="adv"></view>
			<view class="hr7"></view>
			<!-- 日期选择 -->
			<view class="date-box flex-row-between font13" @tap="openCalendar">
				<view class="flex-row-start">
					<image class="icon" src="https://static.newbeaconhotels.com/app/hotel/icon-date.png"></image>
					<uni-dateformat class="format" :date="calendar.startDate" format="MM月dd日"></uni-dateformat>
					<view class="font12 font-969696">{{hotelInfo.msg}}可入住</view>
				</view>
				<uni-icons class="icons" type="arrowright" size="12" color="#535353"></uni-icons>
			</view>
			<view class="hr7"></view>
			<!-- 房间列表 -->
			<view class="box-goods">
				<view class="item-box">
					<uni-collapse>
						<uni-collapse-item v-for="(item, index) in roomList" :key="index" :showAnimation="true">
							<template slot="title">
								<view class="item flex-row-start flex-start">
									<view class="image bg-cover" :style="{backgroundImage: 'url(' + (imgPath + item.basic.img) + ')'}" @click.stop="goNext('/pages/hotel/room?id=' + item.basic.id)">
										<view class="tag">详情</view>
									</view>
									<view class="info flex-column-between">
										<view class="name font15 ellipsis">{{item.basic.name}}</view>
										<view v-if="item.bedtype[0]" class="group-p1 font12 font-646464">
											{{item.basic.size}}㎡ {{item.bedtype[0].num}}张{{item.bedtype[0].wide}}米{{item.bedtype[0].name}}  {{item.basic.window == 0 ? '无窗' : (item.bedtype[0].window == 1 ? '有窗' : '部分有窗')}}
										</view>
									</view>
									<view class="avg-price font-assist font12">￥<text class="font18">{{item.basic.price}}</text></view>
								</view>
							</template>
							<!-- 展开 -->
							<view class="price-list">
								<block v-for="(room, i) in item.crs_channel" :key="i">
									<view class="price-item flex-row-between">
										<view class="part1">
											<view class="flex-row-start">
												<text class="font-theme font14">{{room.ratecodeDesc}}</text>
											</view>
											<view class="font13 font-969696" v-if="room.avail <= 10">仅剩<text class="font-assist">{{room.avail}}</text>间</view>
										</view>
										<button class="part3 tc" :class="{'grey': room.avail < 1}" :disabled="room.avail < 1" @click.stop="goOrder(item.basic.id, item.basic.name, room.ratecodeDesc)">
											<view class="p1 font14 font-ffffff">{{room.avail < 1 ? '满房' : '预订'}}</view>
										</button>
									</view>
								</block>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
		</view>
		
		<!-- 日历组件 -->
		<JCalendar ref="calendar" :themeColor="themeColor" mode="1" :startDate="calendar.startDate" :endDate="calendar.endDate" @callback="bookCalendar"></JCalendar>
		
		<!-- 联系客服 -->
		<bottomPopup ref="tel" title="联系客服">
			<view v-if="hotelInfo.contact" class="contact-box">
				<view class="item flex-row-between" @tap="makePhone(hotelInfo.contact.group)">
					<view>客服热线</view>
					<view>{{hotelInfo.contact.group}}</view>
				</view>
				<view class="item flex-row-between" @tap="makePhone(hotelInfo.contact.hotel)">
					<view>酒店客服</view>
					<view>{{hotelInfo.contact.hotel}}</view>
				</view>
			</view>
		</bottomPopup>
		
		<!-- 弹窗（优惠券） -->
		<bottomPopup ref="coupon" title="选择优惠券" :btnMargin="'60rpx auto;'">
			<scroll-view :scroll-y="true" v-if="coupons && coupons.length > 0" class="popup-coupons">
				<view class="coupon-item flex-row-start" v-for="(item, index) in coupons" :key="index">
					<view class="left flex-column-center">
						<view class="tag">{{item.coupon_type_name}}</view>
						<view class="font12 font-assist">
							<!-- 10满减券 30立即券 -->
							<text v-if="item.coupon_type==10 || item.coupon_type==30">￥</text>
							<text v-if="item.coupon_type==10 || item.coupon_type==30" class="dis">{{item.reduce_money}}</text>
							<!-- 20折扣券 -->
							<text v-if="item.coupon_type==20" class="dis">{{item.discount*10}}折</text>
						</view>
					</view>
					<view class="right flex-column-between">
						<view class="font13">{{item.title}}</view>
						<!-- 10满减券 -->
						<view v-if="item.coupon_type==10" class="font12 font-assist">满{{item.full_money}}使用</view>
						<!-- 20折扣券 30立即券 -->
						<view v-if="item.coupon_type==20 || item.coupon_type==30" class="font12 font-assist">无限制</view>
						<view class="font12 font-969696">有效期至{{item.end_time}}</view>
					</view>
					<view @click="OnReceive(item)" class="get font12 font-ffffff tc">{{ item.choois ? '取消领取' : '立即领取'}}</view>
				</view>
			</scroll-view>
			<view v-else class="content coupon-empty">
				<image class="img" src="https://static.newbeaconhotels.com/app/hotel/empty.png"></image>
				<view class="txt font13 font-969696 tc">暂无优惠券</view>
			</view>
		</bottomPopup>
		
		<!-- 弹窗（分享选择） -->
		<bottomPopup ref="share" title="分享">
			<view class="share-box flex-row-between">
				<!--  #ifdef  MP-WEIXIN -->
				<button class="item flex-column-between" open-type="share">
					<image src="https://static.newbeaconhotels.com/app/hotel/share-style1.png"></image>
					<text>分享给朋友</text>
				</button>
				<!--  #endif -->
				<!--  #ifdef  H5 -->
				<view class="item flex-column-between" @click="OnjshareOpen">
					<image src="https://static.newbeaconhotels.com/app/hotel/share-style1.png"></image>
					<text>分享给朋友</text>
				</view>
				<!--  #endif -->
				<view class="item flex-column-between" @tap="openPoster">
					<image src="https://static.newbeaconhotels.com/app/hotel/share-style2.png"></image>
					<text>生成分享海报</text>
				</view>
			</view>
		</bottomPopup>
		
		<!-- 画布 -->
		<lPainter custom-style="position: fixed; left: 200%;" :isH5PathToBase64="true" ref="painter" isRenderImage
			width="550rpx" height="750rpx" @success="Onimgsuccess" @fail="Onimgfail" />
		
		<!-- H5二维码 -->
		<!--  #ifdef  H5 -->
		<canvas canvas-id="qrcode" style="width: 120rpx;height: 120rpx;position: fixed; left: 200%;" />
		<!--  #endif -->
		
		<!-- 海报 -->
		<uni-popup ref="poster" type="center">
			<!--  #ifdef  MP-WEIXIN -->
			<view class="poster-box">
				<image class="banner" :src="(imgPath + hotelInfo.img)"></image>
				<view class="inner">
					<view class="price font-ff3c37 font10">
						<text>￥</text>
						<text class="font18">{{hotelInfo.price}}</text>
						<text class="font-969696 qi">起</text>
					</view>
					<view class="name font14 font-b">{{hotelInfo.name}}</view>
					<view class="addr font-969696 font11">{{hotelInfo.addrd}}</view>
					<view class="personal flex-row-between">
						<image class="photo" :src="userInfo.user.avatar"></image>
						<view class="center">
							<view class="font13 font-b">{{userInfo.user.name}}</view>
							<view class="font11 font-646464">扫码查看酒店详情</view>
						</view>
						<image class="code" :src="wxcode"></image>
					</view>
					<view class="btn-save flex-row-center font-ffffff font15" @click="OnsaveImage">保存至相册</view>
				</view>
			</view>
			<!--  #endif -->
			
			<!--  #ifdef  H5 -->
			<image v-if="saveImageif" class="poster-h5" :src="saveImage"></image>
			<view class="btn-save-h5 font-ffffff font14 flex-row-center">长按图片保存至相册</view>
			<!--  #endif -->
			
			<image class="poster-close" src="https://static.newbeaconhotels.com/app/hotel/close-line.png" @click="closePoster"></image>
		</uni-popup>
		
		<!--  #ifdef  H5 -->
		<!-- H5分享 -->
		<JsharePopup ref="JsharePopup"></JsharePopup>
		<!--  #endif -->
	</view>
</template>

<script>
	import JCalendar from '@/components/j-calendar/index.vue';
	import bottomPopup from "@/components/j-bottomPopup/index.vue";
	import lPainter from '@/components/lime-painter/index.vue';
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js';
	import { base64ToPath } from '@/js_sdk/mmmm-image-tools/index.js';
	import JsharePopup from '@/components/j-sharePopup/index.vue';
	export default {
		components: { JCalendar, bottomPopup, lPainter, JsharePopup },
		data() {
			return {
				themeColor: '#03004c',
				imgPath: this.$Config.http_static, // 图片头
				imgOss: this.$Config.http_oss, // 图片头
				imgAvatar: this.$Config.http_avatar, // 头像域名
				// 日历
				calendar: {
					startDate: '' // 默认入住日期
				},
				hotelInfo: null, // 酒店详情
				roomList: [], // 房型列表
				coupons: [], // 酒店可领的券
				// 用户信息
				userInfo: {},
				userType: 2, // 1员工，2会员
				idInfo: {},
				// 分享
				wxcode: '', // 小程序二维码
				wxcodeh5: '', // H5二维码
				saveImageif: false, // 图片成功
				saveImage: '', // 画图图片
			}
		},
		onLoad (options) {
			// 从缓存中拿取查询条件
			let JsonData = uni.getStorageSync('hotelQuery')
			if (JsonData) {
				if (JsonData.calendar) {
					this.calendar = JsonData.calendar
				}
			}

			// 从缓存中拿取各种id信息
			this.idInfo = uni.getStorageSync('idInfo')
			
			let params = {}
			if (this.$Route.query.scene) {
				params = this.$base.OnWxoptions(this.$Route.query.scene)
			}else{
				params = options
			}
			
			// 酒店详情
			this.$Http({
				url: 'hotelInfo',
				load: true,
				data: {
					id: params.id,
					type: 'short',
				},
			}).then(res => {
				if (res.code == 1) {
					/*酒店信息*/
					this.hotelInfo = res.data
					
					/*酒店可领的券*/
					this.getHotelCoupon()
					
					/*获取酒店房型列表*/
					this.getRoom()
				}
			});
		},
		methods: {
			// 获取酒店可领的券
			getHotelCoupon () {
				this.$Http({
					url: 'hotelCoupon',
					data: {
						hotel_id: this.hotelInfo.id,
						channel: 'ZD'
					}
				}).then(res => {
					if(res.code == 1) {
						this.coupons = res.data
					}
				});
			},
			// 获取酒店房型列表
			getRoom () {
				this.$Http({
					url: 'room',
					token: uni.getStorageSync('token') ? true : false,
					data: {
						hotel_id: this.hotelInfo.id,
						data: this.$base.formatTime(new Date(this.calendar.startDate), "yyyy-MM-dd"),
						dayCount: '1',
						channel: 'ZD'
					}
				}).then(res1 => {
					if(res1.code == 1) {
						this.roomList = res1.data.data
					}
				});
			},
			// 打开日历
			openCalendar () {
				this.$refs.calendar.openCalendar()
			},
			// 选择日历
			bookCalendar (date) {
				console.log('时租房详情选择的日期' + JSON.stringify(date))
				let hotelQuery = {
					calendar: date
				}
				uni.setStorage({key: 'hotelQuery', data: hotelQuery})
				this.calendar = date
				
				/*获取酒店房型列表*/
				this.getRoom()
			},
			// 打开优惠券
			openCoupon () {
				this.$refs.coupon.Onopen()
			},
			// 领取优惠券
			OnReceive(item) {
				var that = this
				this.$Http({
					url: 'couponReceive',
					token: true,
					type: 'POST',
					data: {
						coupon_id: item.id
					},
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({ title: '领取成功,已发放到卡包', icon: 'none', duration: 4000 })
						// 酒店可领的券
						this.getHotelCoupon()
					} else {
						uni.showToast({ title: res.msg, icon: 'none' })
					}
				});
			},
			// 打开客服
			openTel () {
				this.$refs.tel.Onopen()
			},
			// 拨打电话
			makePhone (tel) {
				uni.makePhoneCall({
				    phoneNumber: tel
				});
			},
			// 打开定位导航
			openLocation () {
				uni.openLocation({
					name: this.hotelInfo.name,
					latitude: parseFloat(this.hotelInfo.lat),
					longitude: parseFloat(this.hotelInfo.lon),
					success: function () {
						console.log('success');
					}
				});
			},
			// 去预订
			goOrder (id, name, tag) {
				/*获取用户信息*/
				this.$Http({
					url: 'user',
					token: true
				}).then(res => {
					if (res.code == 1) {
						let bookQuery = {
							hotel_id: this.hotelInfo.id,
							calendar: this.calendar,
							room_id: id,
							room_name: name,
							tag: tag
						}
						uni.setStorage({key: 'bookQuery', data: bookQuery})
						
						// #ifdef MP-WEIXIN
						uni.navigateTo({ url: '/pages/hotel/hourRoomBook' });
						// #endif
						
						// #ifdef H5
						uni.setStorage({ key: 'firstType', data: true })
						window.location.href = this.$Config.http_h5_url + '/pages/hotel/hourRoomBook'
						// #endif
					}
				});
			},
			// 路由跳转: tag默认false,tag=true跳到tabBar页面
			goNext(url, tag) {
				if (tag) {
					uni.switchTab({ url: url });
				} else {
					uni.navigateTo({ url: url });
				}
			},
			// 打开分享选择
			openShare () {
				/*获取用户信息*/
				this.$Http({
					url: 'user',
					token: true
				}).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
						
						let type = res.data.user.group
						if (type.indexOf('员工') >= 0) {
						  this.userType = 1
						} else if (type.indexOf('会员') >= 0) {
						  this.userType = 2
						}
						
						/*生成二维码*/
						// #ifdef MP-WEIXIN
						this.getWxcode()
						// #endif
							
						// #ifdef H5
						this.getH5code()
						// #endif
						
						/*打开分享选择*/
						this.$refs.share.Onopen()
					}
				});
			},
			// H5分享弹出
			OnjshareOpen() {
				this.$refs.share.onClose()
				this.$refs.JsharePopup.Onopen()
			},
			// 打开海报分享
			openPoster () {
				// #ifdef H5
				uni.showLoading({ title: '海报生成中', mask: true });
				this.onCustom()
				// #endif
				// #ifdef MP-WEIXIN
				this.$refs.share.onClose()
				this.$refs.poster.open()
				// #endif
			},
			// 关闭海报
			closePoster () {
				this.$refs.poster.close()
			},
			// 海报-小程序二维码
			getWxcode () {
				let data = {};
				data.page = '/pages/hotel/hourRoomDetail';
				
				// 员工分享的父id是自己，会员分享的父id是终极父id
				let $P = this.userType == 1 ? this.userInfo.user.user_id : this.userInfo.user.parent_id;
				// 分享出去的来源id永远是自己的id
				let $F = this.userInfo.user.user_id;
				let $C = this.idInfo.Cid
				
				if ($C) {
					data.message_id = 'Pid.' + $P + ',Fid.' + $F + ',id.' + this.hotelInfo.id + ',Cid.' + $C
				} else {
					data.message_id = 'Pid.' + $P + ',Fid.' + $F + ',id.' + this.hotelInfo.id
				}
				
				this.$Http({
					url: 'getQrcode',
					data: data,
				}).then(res => {
					if (res.code == 1) {
						this.wxcode = res.data.replace(/[\r\n]/g, '') // 将回车换行换为空字符''
						this.onCustom()
					}
				});
			},
			// 海报-H5二维码
			getH5code () {
				let that = this;
				let url = 'https://jd.newbeaconhotels.com/h5/jd/pages/hotel/hourRoomDetail?scene='
				let message_id = '';
				
				// 员工分享的父id是自己，会员分享的父id是终极父id
				let $P = this.userType == 1 ? this.userInfo.user.user_id : this.userInfo.user.parent_id;
				// 分享出去的来源id永远是自己的id
				let $F = this.userInfo.user.user_id;
				let $C = this.idInfo.Cid
				
				if ($C) {
					message_id = 'Pid.' + $P + ',Fid.' + $F + ',id.' + this.hotelInfo.id + ',Cid.' + $C
				} else {
					message_id = 'Pid.' + $P + ',Fid.' + $F + ',id.' + this.hotelInfo.id
				}
				
				console.log(url+message_id)
				uQRCode.make({
					canvasId: 'qrcode',
					text: url + message_id,
					size: uni.upx2px(90)
				}).then(res => {
					base64ToPath(res)
						.then(path => {
							that.wxcodeh5 = path
						})
						.catch(error => {
							console.error(error)
						})
				}).finally(() => {
			
				})
			},
			// 海报-绘制
			onCustom () {
				// 支持通过调用render传入参数
				const painter = this.$refs.painter
				var base = {
					width: '550rpx',
					height: '750rpx',
					radius: '15rpx',
					background: '#ffffff',
					views: [
						{
							type: 'image',
							src: this.imgOss + this.hotelInfo.img,
							css: {
								left: '0rpx',
								top: '0rpx',
								width: '550rpx',
								height: '330rpx'
							}
						},
						{
							type: 'view',
							css: {
								width: '550rpx',
								left: '25rpx',
								top: '350rpx'
							},
							views: [
								{
									type: 'text',
									text: '￥' + this.hotelInfo.price,
									css: {
										fontSize: '36rpx',
										color: '#ff3c37',
										margin: '0rpx 6rpx 0rpx 0rpx',
									}
								},
								{
									type: 'text',
									text: '起',
									css: {
										fontSize: '20rpx',
										color: '#969696',
										verticalAlign: 'middle'
									}
								},
							]
						},
						{
							type: 'view',
							css: {
								width: '500rpx',
								height: '80rpx',
								left: '25rpx',
								top: '404rpx',
							},
							views: [
								{
									type: 'text',
									text: this.hotelInfo.name,
									css: {
										fontSize: '28rpx',
										textAlign: 'left',
										maxLines: 2,
										verticalAlign: 'middle'
									}
								}
							]
						},
						{
							type: 'view',
							css: {
								width: '500rpx',
								height: '80rpx',
								left: '25rpx',
								top: '484rpx',
							},
							views: [
								{
									type: 'text',
									text: this.hotelInfo.addrd,
									css: {
										fontSize: '22rpx',
										color: '#969696',
										textAlign: 'left',
										maxLines: 2,
										verticalAlign: 'middle'
									}
								}
							]
						},
						{
							type: 'view',
							css: {
								width: '550rpx',
								height: '120rpx'
							},
							views: [
								{
									type: 'image',
									src: this.imgAvatar + this.userInfo.user.avatar2,
									css: {
										left: '25rpx',
										top: '580rpx',
										width: '80rpx',
										height: '80rpx',
										radius: '40rpx',
										background: '#ffffff'
									}
								},
								{
									type: 'view',
									css: {
										left: '125rpx',
										top: '570rpx',
										width: '280rpx',
										height: '80rpx',
									},
									views: [
										{
											type: 'text',
											text: this.userInfo.user.name,
											css: {
												fontSize: '26rpx',
												color: '#1e1e1e',
												display: 'block',
												height: '40rpx',
												lineHeight: '40rpx'
											}
										},
										{
											type: 'text',
											text: '扫码查看酒店详情',
											css: {
												fontSize: '22rpx',
												color: '#646464',
												lineHeight: '40rpx',
												height: '40rpx',
												display: 'block'
											}
										},
									]
								},
								// #ifdef MP-WEIXIN
								{
									type: 'image',
									src: this.wxcode,
									css: {
										left: '360rpx',
										top: '550rpx',
										width: '120rpx',
										height: '120rpx',
									}
								},
								// #endif
								// #ifdef H5
								{
									type: 'image',
									src: this.wxcodeh5,
									css: {
										left: '360rpx',
										top: '550rpx',
										width: '120rpx',
										height: '120rpx',
									}
								}
								// #endif
							]
						}
					]
				}
				painter.render(base)
			},
			// 海报-画布已生成海报图片
			Onimgsuccess (res) {
				console.log('画布已生成海报图片:', res)
				
				// #ifdef H5
				this.$refs.share.onClose()
				this.$refs.poster.open()
				uni.hideLoading();
				// #endif
				this.saveImage = res
				this.saveImageif = true
			},
			// 海报-画布失败
			Onimgfail() {
				uni.hideLoading();
				uni.showToast({
					icon: 'none',
					duration: 3000,
					title: '生成海报失败'
				});
			},
			// 海报-保存至相册
			OnsaveImage () {
				let $this = this
				if (this.saveImageif) {
					uni.saveImageToPhotosAlbum({
						filePath: $this.saveImage,
						success(res) {
							uni.showToast({ title: '已保存到相册', icon: 'success', duration: 2000 })
							$this.$refs.poster.close()
						}
					})
				} else {
					uni.showToast({ icon: 'none', duration: 3000, title: '海报生成中~' });
				}
			}
		}
	}
</script>

<style lang="less">
	@import url("../home/goods.less");
	@import '@/common/css/share.less';
	@import url("style.less");
</style>
